﻿@page "/docs/components/text"

<Seo Canonical="/docs/components/text" Title="Blazorise TextEdit component" Description="TextEdit fields components are used for collecting user provided information." />

<DocsPageTitle>
    TextEdit component
</DocsPageTitle>

<DocsPageParagraph>
    <Code Tag>TextEdit</Code> fields components are used for collecting user provided information.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic" />
    <DocsPageSectionContent Outlined FullWidth>
        <BasicTextEditExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicTextEditExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Placeholder" />
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditPlaceholderExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditPlaceholderExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Static text">
        Static text removes the background, border, shadow, and horizontal padding, while maintaining the
        vertical spacing so you can easily align the input in any context, like a horizontal form.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditPlaintextExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditPlaintextExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Disabled">
        A disabled input element is unusable and un-clickable.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditDisabledExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditDisabledExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="ReadOnly">
        If you use the read-only attribute, the input text will look similar to a normal one, but is not editable.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditReadonlyExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditReadonlyExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Sizing">
        Sets the heights of input elements.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditSizingExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditSizingExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Pattern">
        Use pattern attribute to specify regular expression that will be used while validating the input text value.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditPatternExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditPatternExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="EditMask">
        Edit masks are used to prevent user from entering an invalid values and when entered string must match
        a specific format. For example you can limit input to only accept numeric string, date string or if you
        want full control you can use RegEx format.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditMaskExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditMaskExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Roles">
        Use Role to define type of text value.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditRoleExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditRoleExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Binding
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Two-way binding">
        By using <Code>bind-*</Code> attribute the text will be automatically assigned to the member variable.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Manual event binding">
        When using the event <Code>TextChanged</Code>, you also must define the <Code>Text</Code> value attribute.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <TextEditWithEventExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="TextEditWithEventExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Settings
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Text Changed mode">
        By default the <Code>TextChanged</Code> event will be raised on every keypress.
        To override default behavior of <Code>TextChanged</Code> event and to disable the change on every
        keypress you must set the <Code>ChangeTextOnKeyPress</Code> to <Code>false</Code> on application start.
        After setting it to <Code>false</Code> the event will be raised only after the input loses focus.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="TextEditTextChangedModeExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Text Delay mode">
        Because of some limitations in Blazor, sometimes there can be problems when <Code>ChangeTextOnKeyPress</Code> is enabled.
        Basically if you try to type too fast into the text field the caret can jump randomly from current selection
        to the end of the text. To prevent that behaviour you need to enable <Code>DelayTextOnKeyPress</Code>. Once enabled it will
        slightly delay every value entered into the field to allow the Blazor engine to do it’s thing.
        By default this option is disabled.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="TextEditTextDelayModeExample" />
</DocsPageSection>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        <Strong>Note:</Strong> All of the options above can also be defined on each <Code>TextEdit</Code> individually.
        Defining them on <Code>TextEdit</Code> will override any global settings.
    </AlertDescription>
</Alert>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="Role" Type="TextRole" Default="Text">
        The role of the input text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Text" Type="string" Default="null">
        Input value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextChanged" Type="@("EventCallback<string>")">
        Occurs after text has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Plaintext" Type="bool" Default="false">
        Remove the default form field styling and preserve the correct margin and padding.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ReadOnly" Type="bool" Default="false">
        Prevents modification of the input’s value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Disabled" Type="bool" Default="false">
        Prevents user interactions and make it appear lighter.
    </DocsAttributesItem>
    <DocsAttributesItem Name="MaxLength" Type="int?" Default="null">
        Specifies the maximum number of characters allowed in the input element.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Placeholder" Type="string" Default="null">
        Sets the placeholder for the empty text.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Pattern" Type="string" Default="null">
        Specifies a regular expression that the input element’s value is checked against on form validation.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Color" Type="Color" Default="None">
        Component visual or contextual style variants.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Size" Type="Size" Default="None">
        Component size variations.
    </DocsAttributesItem>
    <DocsAttributesItem Name="EditMask" Type="" Default="">
        A string representing a edit mask expression.
    </DocsAttributesItem>
    <DocsAttributesItem Name="MaskType" Type="MaskType" Default="None">
        Specify the mask type used by the editor.
    </DocsAttributesItem>
    <DocsAttributesItem Name="VisibleCharacters" Type="int?" Default="null">
        Specifies the visible width, in characters, of an <Code Tag>input</Code> element.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ChangeTextOnKeyPress" Type="bool?" Default="null">
        If true the text in will be changed after each key press (overrides global settings).
    </DocsAttributesItem>
    <DocsAttributesItem Name="DelayTextOnKeyPress" Type="bool?" Default="null">
        If true the entered text will be slightly delayed before submitting it to the internal value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DelayTextOnKeyPressInterval" Type="bool?" Default="null">
        Interval in milliseconds that entered text will be delayed from submitting to the internal value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="KeyDown" Type="EventCallback<KeyboardEventArgs>">
        Occurs when a key is pressed down while the control has focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="KeyDown" Type="EventCallback<KeyboardEventArgs>">
        Occurs when a key is pressed down while the control has focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="KeyPress" Type="EventCallback<KeyboardEventArgs>">
        Occurs when a key is pressed while the control has focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="KeyUp" Type="EventCallback<KeyboardEventArgs>">
        Occurs when a key is released while the control has focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="OnFocus" Type="EventCallback<KeyboardEventArgs>">
        Occurs when the input box gains focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="FocusIn" Type="EventCallback<KeyboardEventArgs>">
        Occurs when the input box gains focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="FocusOut" Type="EventCallback<KeyboardEventArgs>">
        Occurs when the input box loses focus.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Autofocus" Type="bool" Default="false">
        Set’s the focus to the component after the rendering is done.
    </DocsAttributesItem>
</DocsAttributes>
